<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"
    />
    <meta
      name="description"
      content="Demonstrates the wide variety of available geometry and appearances."
    />
    <meta name="quarkgis-sandcastle-labels" content="Showcases" />
    <title>QuarkGIS Demo</title>
    <script type="text/javascript" src="../Sandcastle-header.js"></script>
    <script
      type="text/javascript"
      src="../../../Build/QuarkGISUnminified/QuarkGIS.js"
      nomodule
    ></script>
    <script type="module" src="../load-quarkgis-es6.js"></script>
  </head>
  <body
    class="sandcastle-loading"
    data-sandcastle-bucket="bucket-requirejs.html"
  >
    <style>
      @import url(../templates/bucket.css);
    </style>
    <div id="quarkgisContainer" class="fullSize"></div>
    <div id="loadingOverlay"><h1>Loading...</h1></div>
    <div id="toolbar"></div>
    <script id="quarkgis_sandcastle_script">
      function startup(QuarkGIS) {
        "use strict";
        //Sandcastle_Begin
        QuarkGIS.Math.setRandomNumberSeed(1234);

        var viewer = new QuarkGIS.Viewer("quarkgisContainer", { infoBox: false });
        var entities = viewer.entities;

        var i;
        var height;
        var positions;
        var stripeMaterial = new QuarkGIS.StripeMaterialProperty({
          evenColor: QuarkGIS.Color.WHITE.withAlpha(0.5),
          oddColor: QuarkGIS.Color.BLUE.withAlpha(0.5),
          repeat: 5.0,
        });

        entities.add({
          rectangle: {
            coordinates: QuarkGIS.Rectangle.fromDegrees(-92.0, 20.0, -86.0, 27.0),
            outline: true,
            outlineColor: QuarkGIS.Color.WHITE,
            outlineWidth: 4,
            stRotation: QuarkGIS.Math.toRadians(45),
            material: stripeMaterial,
          },
        });

        entities.add({
          polygon: {
            hierarchy: new QuarkGIS.PolygonHierarchy(
              QuarkGIS.Cartesian3.fromDegreesArray([
                -107.0,
                27.0,
                -107.0,
                22.0,
                -102.0,
                23.0,
                -97.0,
                21.0,
                -97.0,
                25.0,
              ])
            ),
            outline: true,
            outlineColor: QuarkGIS.Color.WHITE,
            outlineWidth: 4,
            material: stripeMaterial,
          },
        });

        entities.add({
          position: QuarkGIS.Cartesian3.fromDegrees(-80.0, 25.0),
          ellipse: {
            semiMinorAxis: 300000.0,
            semiMajorAxis: 500000.0,
            rotation: QuarkGIS.Math.toRadians(-40.0),
            outline: true,
            outlineColor: QuarkGIS.Color.WHITE,
            outlineWidth: 4,
            stRotation: QuarkGIS.Math.toRadians(22),
            material: stripeMaterial,
          },
        });

        entities.add({
          position: QuarkGIS.Cartesian3.fromDegrees(-72.0, 25.0),
          ellipse: {
            semiMinorAxis: 250000.0,
            semiMajorAxis: 250000.0,
            rotation: QuarkGIS.Math.toRadians(-40.0),
            outline: true,
            outlineColor: QuarkGIS.Color.WHITE,
            outlineWidth: 4,
            stRotation: QuarkGIS.Math.toRadians(90),
            material: stripeMaterial,
          },
        });

        entities.add({
          rectangle: {
            coordinates: QuarkGIS.Rectangle.fromDegrees(
              -118.0,
              38.0,
              -116.0,
              40.0
            ),
            extrudedHeight: 500000.0,
            outline: true,
            outlineColor: QuarkGIS.Color.WHITE,
            outlineWidth: 4,
            stRotation: QuarkGIS.Math.toRadians(45),
            material: QuarkGIS.Color.fromRandom({ alpha: 1.0 }),
          },
        });

        entities.add({
          position: QuarkGIS.Cartesian3.fromDegrees(-117.0, 35.0),
          ellipse: {
            semiMinorAxis: 100000.0,
            semiMajorAxis: 200000.0,
            height: 100000.0,
            extrudedHeight: 200000.0,
            rotation: QuarkGIS.Math.toRadians(90.0),
            outline: true,
            outlineColor: QuarkGIS.Color.WHITE,
            outlineWidth: 4,
            material: QuarkGIS.Color.fromRandom({ alpha: 1.0 }),
          },
        });

        entities.add({
          polygon: {
            hierarchy: new QuarkGIS.PolygonHierarchy(
              QuarkGIS.Cartesian3.fromDegreesArray([
                -118.0,
                30.0,
                -115.0,
                30.0,
                -117.1,
                31.1,
                -118.0,
                33.0,
              ])
            ),
            height: 300000.0,
            extrudedHeight: 700000.0,
            outline: true,
            outlineColor: QuarkGIS.Color.WHITE,
            outlineWidth: 4,
            material: QuarkGIS.Color.fromRandom({ alpha: 1.0 }),
          },
        });

        entities.add({
          position: QuarkGIS.Cartesian3.fromDegrees(-70.0, 45.0, 100000.0),
          cylinder: {
            hierarchy: new QuarkGIS.PolygonHierarchy(
              QuarkGIS.Cartesian3.fromDegreesArray([
                -118.0,
                30.0,
                -115.0,
                30.0,
                -117.1,
                31.1,
                -118.0,
                33.0,
              ])
            ),
            length: 200000.0,
            topRadius: 150000.0,
            bottomRadius: 150000.0,
            outline: true,
            outlineColor: QuarkGIS.Color.WHITE,
            outlineWidth: 4,
            material: QuarkGIS.Color.fromRandom({ alpha: 1.0 }),
          },
        });

        for (i = 0; i < 5; ++i) {
          height = 100000.0 + 200000.0 * i;
          entities.add({
            position: QuarkGIS.Cartesian3.fromDegrees(-106.0, 45.0, height),
            box: {
              dimensions: new QuarkGIS.Cartesian3(90000.0, 90000.0, 90000.0),
              outline: true,
              outlineColor: QuarkGIS.Color.WHITE,
              outlineWidth: 2,
              material: QuarkGIS.Color.fromRandom({ alpha: 0.5 }),
            },
          });

          entities.add({
            position: QuarkGIS.Cartesian3.fromDegrees(-102.0, 45.0, height),
            ellipsoid: {
              radii: new QuarkGIS.Cartesian3(45000.0, 45000.0, 90000.0),
              outline: true,
              outlineColor: QuarkGIS.Color.WHITE,
              outlineWidth: 2,
              material: QuarkGIS.Color.fromRandom({ alpha: 0.5 }),
            },
          });

          entities.add({
            position: QuarkGIS.Cartesian3.fromDegrees(-98.0, 45.0, height),
            ellipsoid: {
              radii: new QuarkGIS.Cartesian3(67500.0, 67500.0, 67500.0),
              outline: true,
              outlineColor: QuarkGIS.Color.WHITE,
              outlineWidth: 2,
              material: QuarkGIS.Color.fromRandom({ alpha: 0.5 }),
            },
          });
        }

        entities.add({
          wall: {
            positions: QuarkGIS.Cartesian3.fromDegreesArray([
              -95.0,
              50.0,
              -85.0,
              50.0,
              -75.0,
              50.0,
            ]),
            maximumHeights: [500000, 1000000, 500000],
            minimumHeights: [0, 500000, 0],
            outline: true,
            outlineColor: QuarkGIS.Color.LIGHTGRAY,
            outlineWidth: 4,
            material: QuarkGIS.Color.fromRandom({ alpha: 0.7 }),
          },
        });

        entities.add({
          rectangle: {
            coordinates: QuarkGIS.Rectangle.fromDegrees(-92.0, 30.0, -85.0, 40.0),
            material: stripeMaterial,
          },
        });

        entities.add({
          polygon: {
            hierarchy: {
              positions: QuarkGIS.Cartesian3.fromDegreesArray([
                -109.0,
                30.0,
                -95.0,
                30.0,
                -95.0,
                40.0,
                -109.0,
                40.0,
              ]),
              holes: [
                {
                  positions: QuarkGIS.Cartesian3.fromDegreesArray([
                    -107.0,
                    31.0,
                    -107.0,
                    39.0,
                    -97.0,
                    39.0,
                    -97.0,
                    31.0,
                  ]),
                  holes: [
                    {
                      positions: QuarkGIS.Cartesian3.fromDegreesArray([
                        -105.0,
                        33.0,
                        -99.0,
                        33.0,
                        -99.0,
                        37.0,
                        -105.0,
                        37.0,
                      ]),
                      holes: [
                        {
                          positions: QuarkGIS.Cartesian3.fromDegreesArray([
                            -103.0,
                            34.0,
                            -101.0,
                            34.0,
                            -101.0,
                            36.0,
                            -103.0,
                            36.0,
                          ]),
                        },
                      ],
                    },
                  ],
                },
              ],
            },
            material: stripeMaterial,
          },
        });

        entities.add({
          position: QuarkGIS.Cartesian3.fromDegrees(-80.0, 35.0),
          ellipse: {
            semiMinorAxis: 200000.0,
            semiMajorAxis: 500000.0,
            rotation: QuarkGIS.Math.toRadians(30.0),
            material: stripeMaterial,
          },
        });

        entities.add({
          position: QuarkGIS.Cartesian3.fromDegrees(-72.0, 35.0),
          ellipse: {
            semiMinorAxis: 200000.0,
            semiMajorAxis: 200000.0,
            rotation: QuarkGIS.Math.toRadians(30.0),
            material: stripeMaterial,
          },
        });

        entities.add({
          rectangle: {
            coordinates: QuarkGIS.Rectangle.fromDegrees(
              -110.0,
              38.0,
              -107.0,
              40.0
            ),
            height: 700000.0,
            extrudedHeight: 1000000.0,
            rotation: QuarkGIS.Math.toRadians(45),
            material: QuarkGIS.Color.fromRandom({ alpha: 1.0 }),
          },
        });

        entities.add({
          position: QuarkGIS.Cartesian3.fromDegrees(-110.0, 35.0),
          ellipse: {
            semiMinorAxis: 100000.0,
            semiMajorAxis: 200000.0,
            height: 300000.0,
            extrudedHeight: 700000.0,
            rotation: QuarkGIS.Math.toRadians(-40.0),
            material: QuarkGIS.Color.fromRandom({ alpha: 1.0 }),
          },
        });

        entities.add({
          polygon: {
            hierarchy: new QuarkGIS.PolygonHierarchy(
              QuarkGIS.Cartesian3.fromDegreesArray([
                -113.0,
                30.0,
                -110.0,
                30.0,
                -110.0,
                33.0,
                -111.5,
                31.0,
                -113.0,
                33.0,
              ])
            ),
            extrudedHeight: 300000.0,
            material: QuarkGIS.Color.fromRandom({ alpha: 1.0 }),
          },
        });

        entities.add({
          position: QuarkGIS.Cartesian3.fromDegrees(-70.0, 40.0, 200000.0),
          cylinder: {
            hierarchy: new QuarkGIS.PolygonHierarchy(
              QuarkGIS.Cartesian3.fromDegreesArray([
                -118.0,
                30.0,
                -115.0,
                30.0,
                -117.1,
                31.1,
                -118.0,
                33.0,
              ])
            ),
            length: 400000.0,
            topRadius: 0.0,
            bottomRadius: 200000.0,
            material: QuarkGIS.Color.fromRandom({ alpha: 1.0 }),
          },
        });

        for (i = 0; i < 5; ++i) {
          height = 200000.0 * i;

          entities.add({
            position: QuarkGIS.Cartesian3.fromDegrees(-65.0, 35.0),
            ellipse: {
              semiMinorAxis: 200000.0,
              semiMajorAxis: 200000.0,
              height: height,
              material: QuarkGIS.Color.fromRandom({ alpha: 0.5 }),
            },
          });

          entities.add({
            rectangle: {
              coordinates: QuarkGIS.Rectangle.fromDegrees(
                -67.0,
                27.0,
                -63.0,
                32.0
              ),
              height: height,
              material: QuarkGIS.Color.fromRandom({ alpha: 0.5 }),
            },
          });
        }

        for (i = 0; i < 5; ++i) {
          height = 100000.0 + 200000.0 * i;
          entities.add({
            position: QuarkGIS.Cartesian3.fromDegrees(-108.0, 45.0, height),
            box: {
              dimensions: new QuarkGIS.Cartesian3(90000.0, 90000.0, 90000.0),
              material: QuarkGIS.Color.fromRandom({ alpha: 1.0 }),
            },
          });

          entities.add({
            position: QuarkGIS.Cartesian3.fromDegrees(-104.0, 45.0, height),
            ellipsoid: {
              radii: new QuarkGIS.Cartesian3(45000.0, 45000.0, 90000.0),
              material: QuarkGIS.Color.fromRandom({ alpha: 1.0 }),
            },
          });

          entities.add({
            position: QuarkGIS.Cartesian3.fromDegrees(-100.0, 45.0, height),
            ellipsoid: {
              radii: new QuarkGIS.Cartesian3(67500.0, 67500.0, 67500.0),
              material: QuarkGIS.Color.fromRandom({ alpha: 1.0 }),
            },
          });
        }

        positions = [];
        for (i = 0; i < 40; ++i) {
          positions.push(QuarkGIS.Cartesian3.fromDegrees(-100.0 + i, 15.0));
        }

        entities.add({
          polyline: {
            positions: positions,
            width: 10.0,
            material: new QuarkGIS.PolylineGlowMaterialProperty({
              color: QuarkGIS.Color.DEEPSKYBLUE,
              glowPower: 0.25,
            }),
          },
        });

        positions = [];
        for (i = 0; i < 40; ++i) {
          positions.push(QuarkGIS.Cartesian3.fromDegrees(-100.0 + i, 9.0));
        }

        entities.add({
          wall: {
            positions: QuarkGIS.Cartesian3.fromDegreesArrayHeights([
              -90.0,
              43.0,
              100000.0,
              -87.5,
              45.0,
              100000.0,
              -85.0,
              43.0,
              100000.0,
              -87.5,
              41.0,
              100000.0,
              -90.0,
              43.0,
              100000.0,
            ]),
            material: new QuarkGIS.CheckerboardMaterialProperty({
              repeat: new QuarkGIS.Cartesian2(20.0, 6.0),
            }),
          },
        });

        entities.add({
          corridor: {
            positions: QuarkGIS.Cartesian3.fromDegreesArray([
              -120.0,
              45.0,
              -125.0,
              50.0,
              -125.0,
              55.0,
            ]),
            width: 100000,
            material: QuarkGIS.Color.fromRandom({ alpha: 1.0 }),
          },
        });

        entities.add({
          corridor: {
            positions: QuarkGIS.Cartesian3.fromDegreesArray([
              -120.0,
              45.0,
              -125.0,
              50.0,
              -125.0,
              55.0,
            ]),
            width: 100000,
            height: 300000,
            extrudedHeight: 400000,
            material: QuarkGIS.Color.fromRandom({ alpha: 0.7 }),
          },
        });

        entities.add({
          corridor: {
            positions: QuarkGIS.Cartesian3.fromDegreesArray([
              -120.0,
              45.0,
              -125.0,
              50.0,
              -125.0,
              55.0,
            ]),
            width: 100000,
            height: 700000,
            outline: true,
            outlineColor: QuarkGIS.Color.WHITE,
            outlineWidth: 4,
            material: QuarkGIS.Color.fromRandom({ alpha: 0.7 }),
          },
        });

        function starPositions(arms, rOuter, rInner) {
          var angle = Math.PI / arms;
          var pos = [];
          for (var i = 0; i < 2 * arms; i++) {
            var r = i % 2 === 0 ? rOuter : rInner;
            var p = new QuarkGIS.Cartesian2(
              Math.cos(i * angle) * r,
              Math.sin(i * angle) * r
            );
            pos.push(p);
          }
          return pos;
        }

        entities.add({
          polylineVolume: {
            positions: QuarkGIS.Cartesian3.fromDegreesArrayHeights([
              -102.0,
              15.0,
              100000.0,
              -105.0,
              20.0,
              200000.0,
              -110.0,
              20.0,
              100000.0,
            ]),
            shape: starPositions(7, 30000.0, 20000.0),
            outline: true,
            outlineColor: QuarkGIS.Color.WHITE,
            outlineWidth: 1,
            material: QuarkGIS.Color.fromRandom({ alpha: 1.0 }),
          },
        });

        entities.add({
          polylineVolume: {
            positions: QuarkGIS.Cartesian3.fromDegreesArray([
              -102.0,
              15.0,
              -105.0,
              20.0,
              -110.0,
              20.0,
            ]),
            shape: starPositions(7, 30000.0, 20000.0),
            material: QuarkGIS.Color.fromRandom({ alpha: 1.0 }),
          },
        });

        function computeCircle(radius) {
          var positions = [];
          for (var i = 0; i < 360; i++) {
            var radians = QuarkGIS.Math.toRadians(i);
            positions.push(
              new QuarkGIS.Cartesian2(
                radius * Math.cos(radians),
                radius * Math.sin(radians)
              )
            );
          }
          return positions;
        }

        entities.add({
          polylineVolume: {
            positions: QuarkGIS.Cartesian3.fromDegreesArray([
              -104.0,
              13.0,
              -107.0,
              18.0,
              -112.0,
              18.0,
            ]),
            shape: computeCircle(40000.0),
            material: QuarkGIS.Color.WHITE,
          },
        });

        viewer.zoomTo(viewer.entities);
        //Sandcastle_End
        Sandcastle.finishedLoading();
      }
      if (typeof QuarkGIS !== "undefined") {
        window.startupCalled = true;
        startup(QuarkGIS);
      }
    </script>
  </body>
</html>
